<template>
    <div class="groupPerson">
      <div class="gp-top">
        <div class="top-title">
          <div class="t-flag"></div>
          <div class="t-text">查询</div>
        </div>
        <div class="top-search">
          <div class="s-box">
            <div class="b-account">
              <span class="a-title">账号:</span>
              <input placeholder="请输入账号" type="text" maxlength="11" v-model="account"></input>
              <el-button class="a-search" @click="handleSearch()">搜索</el-button>
              <el-button class="a-export" @click="handleExport()">导出</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="group-content">
        <div class="show-box" v-if="personList.length!==0">
          <div class="bottom-title" >
            <div class="t-flag"></div>
            <div class="t-text">{{username}}</div>
          </div>
          <div class="title">旗下{{roleName}}{{totalMember}}人</div>
          <div class="bottom-content-person" >
            <div class="content-box" v-for="(item,index) in personList" :key="index" @click="handleSearch(item.mobile)">
              <div class="box">
                <div class="item-name">{{item.username}}:&nbsp;{{item.mobile}}</div>
                <div class="item-money">实时业绩:&nbsp;{{item.money}}</div>
                <div class="item-all">投资总额:&nbsp;{{item.self_money}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="no-data" v-if="personList.length===0">
          暂无数据
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "GroupPerson",
        data(){
          return{
              personList:[],
              username:'',
              totalMember:0,
              roleName:'',
              account:''
          }
        },
        mounted() {
            this.username=this.$route.query.username
            this.totalMember=this.$route.query.total
            this.roleName=this.$route.query.roleName
            this.getGroupSubordinta()
        },
        methods:{
          //获取用户下级级别查询
          getGroupSubordinta(){
            const loading =this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let data={
               mobile:this.$route.query.memberId,
               role:this.$route.query.role
            }
            this.$api.GroupSubordInate(data).then((res)=>{
              if(res.data.length!==0){
                this.personList=res.data
              }else{
                this.personList=[]
              }
              loading.close()
            },(err)=>{
              this.$message.error(err.msg)
            })
            setTimeout(()=>{
              loading.close()
            },10000)
          },
          handleSearch(mobile){
            let account=''
            if(mobile){
              account=mobile
            }else{
              if(this.account && this.account.length==11){
                account=this.account
              }else{
                this.$message.error("请输入正确的账号")
                return
              }
            }
            if(account){
              this.$router.push({path:'/menus/group-queryPerson',query:{account:account}})
            }
          },
          handleExport(){
            let url=process.env.API_HOST+"//index.php/dataofuser/getSubordinate?mobile="+this.$route.query.memberId+"&role="+this.$route.query.role+"&to_excel=1"
            const a=document.createElement("a")
            a.setAttribute("download","");
            a.setAttribute("href",url)
            a.click()
          }
        }
    }
</script>

<style scoped lang="less">
   .groupPerson{
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     overflow: auto;
     .gp-top{
       width: 100%;
       background-color: #ffffff;
       .top-title{
         height: 50px;
         display: flex;
         align-items: center;
         padding-left: 30px;
         box-sizing: border-box;
         border-bottom: solid 1px #EEEEEE;
         .t-flag{
           width: 3px;
           height: 15px;
           background-color: #2A4BF0;
         }
         .t-text{
           padding-left: 10px;
           font-size: 16px;
           color: #323232;
         }

       }
       .top-search{
         box-sizing: border-box;
         padding: 20px 40px 20px 40px;
         .s-box{
           width: 100%;
           background-color: #F8F8F8;
           .b-account{
             text-align: left;
             position: relative;
             padding: 7px 10px;
             border-radius: 5px;
             box-sizing: border-box;
             .a-title{
               font-size: 14px;
               color: #323232;
             }
             input{
               width: 200px;
               height: 30px;
               font-size: 14px;
               padding: 5px 10px;
               box-sizing: border-box;
               border: solid 1px #DFE2E7;
               border-radius: 3px;
             }
             .a-search{
               margin-left: 20px;
               width: 80px;
               height: 30px;
               padding: 0;
               line-height: 30px;
             }
             .a-export{
               position: absolute;
               right: 20px;
               width: 80px;
               height: 30px;
               padding: 0;
               line-height: 30px;
             }
           }
         }
       }
     }
     .group-content{
       /*height: 100%;*/
       margin-top: 10px;
       background-color: #ffffff;
       .show-box{
         .bottom-title{
           height: 50px;
           display: flex;
           align-items: center;
           padding-left: 30px;
           box-sizing: border-box;
           .t-flag{
             width: 3px;
             height: 15px;
             background-color: #2A4BF0;
           }
           .t-text{
             padding-left: 10px;
             font-size: 16px;
             color: #323232;
           }
         }
         .title{
           text-align: left;
           padding-left: 43px;
         }
         .bottom-content-person{
           padding: 20px 40px 40px 30px;
           display: flex;
           flex-wrap: wrap;
           .content-box{
             cursor: pointer;
             width: 170px;
             height: 100px;
             position: relative;
             background-color: #95A1FD;
             border-radius: 5px;
             margin: 10px 20px;
             color:#ffffff;
             padding: 10px 10px;
             box-sizing: border-box;
             overflow: hidden;
             .box{
               position: absolute;
               top: 10px;
               left: 20px;
               bottom: 10px;
               display: flex;
               flex-direction: column;
               justify-content: space-around;
               z-index: 10;
               .item-name{
                 text-align: left;
                 font-size: 14px;
               }
               .item-money{
                 text-align: left;
                 font-size: 14px;
               }
               .item-all{
                 text-align: left;
                 font-size: 14px;
               }
             }

           }
           .content-box::after{
             content: '';
             width: 100px;
             height: 100px;
             position: absolute;
             left: 100%;
             bottom: 100%;
             transform: translate(-50%,50%);
             border-radius: 50px;
             background-color: #F9B420;
             z-index: 1;
           }
         }
       }
       .no-data{
         width: 100%;
         background-color:#F2F7F9 ;
         font-size: 20px;
         color: gray;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);

       }
     }

   }
</style>
